<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">照护服务</block></cu-custom>
		<view style="display: flex;" v-if="isHave"  :style="style">
			<view  class="scroll">
				<scroll-view scroll-y="true" style="height:100%;"  >
					<view :class="{'changeColor':tabIndex==index}"  @click="changeTab(index,item)" class="scroll_inner" v-for="(item,index) in roomList" :key="index">
						<view>{{item.roomName}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="scroll_rig"  v-if="isBed">
			<scroll-view scroll-y="true"  style="height:100%;" >
				<view   v-for="(item,index) in rightListItem" :key="index">
					<block v-if="item.bedStatus==1">
						<view class="scroll_rig_inner" style="width: 100%;" @click="gotodeatils(item)">
							<view class="person_img">
								<image src="../../../static/img/basics/u129.png" mode=""></image>
							</view>
							<view class="person_rig">
								<view class="person_tp">
									
									<view>
										{{item.bedName}}
									</view>
									<view class="person_bt">
										<view>{{item.oldManName}}</view>
										<view class='cu-tag round bg-orange'>{{item.abilityLevel}}</view>
										<view class='cu-tag round bg-blue' v-if="item.outStatus==0">外出</view>
									</view>
								</view>
								<view class="person_icon" v-if="item.outStatus==1">
									<text class="lg text-gray cuIcon-right" ></text> 
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="scroll_rig_inner" @click="gotodeatilsOther(item)">
						<view class="person_img">
							<image src="../../../static/u132.png" mode=""></image>
						</view>
						<view class="person_rig">
							<view class="person_tp">
								<view>
									{{item.bedName}}
								</view>
								<view class="person_bt">
									<view>无</view>
									<!-- <view class='cu-tag round bg-orange'>介助</view>
									<view class='cu-tag round bg-blue'>外出</view> -->
								</view>
							</view>
							<!-- <view class="person_icon">
								<text class="lg text-gray cuIcon-right" ></text> 
							</view> -->
						</view>
						</view>
					</block>
				</view>
				</scroll-view>
			</view>
			<view class="no-data" v-if="!isBed" style="width: 100%;text-align: center;">
				暂无数据
			</view>
		</view>
		<view v-if="!isHave" class="no-data">
			暂无数据
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0, //左侧tab
				rightListItem:[],//房间下老人集合
				roomList:[],//房间数组
				isHave:true ,//房间是否为空
				isBed:true ,//床位是否为空
				CustomBar:this.CustomBar,//计算高度
				screenHeight:this.screenHeight,//计算高度
				
				}
		},
		onLoad() {
			this.listRoom();
		},
		computed: {
			style() {
				var customBar= this.CustomBar;
				var screenHeight= this.screenHeight;
				var height = screenHeight - customBar
				var style = `height:${height}px;`;
				return style
			}
		},
		methods: {
			// GET /service/getCurWeekDay 获取当前是周几
			getCurWeekDay() {
				this.$http('/care-service/service/getCurWeekDay', 'get').then(res => {
					if (res.data.code == 200) {
						// weekDay\
						this.weekDay = res.data.data
					}
				});
			},
			
			// 查看房间
			listRoom(){
				// employeeId
				this.$http('/care-service/teamRoom/listRoom','get',{teamId:uni.getStorageSync('teamId'),employeeId:uni.getStorageSync('employeeId')}).then(res=>{
					const floors = res.data.data;
					if(floors.length==0){
						this.isHave = false
					}else{
						this.isHave = true
						this.roomList = floors;
						this.getObjectRightListByServiceItem(floors[0].id);
					}
				});
			},
			// GET /service/getObjectRightListByServiceItem
			// 获取待服务对象右侧列表(传serviceCycle,teamId,'serviceItemId',preId)
			getObjectRightListByServiceItem(roomId){
				let param = {}
				param.teamId = uni.getStorageSync('teamId')
				param.employeeId = uni.getStorageSync('employeeId')
				param.roomId = roomId
				this.$http('/care-service/outRegistration/listOldMan','get',param).then(res=>{
					if(res.data.code==200){
						if(res.data.data.length){
							this.isBed =  true
							this.rightListItem = res.data.data;
						}else{
							this.isBed = false
							console.log(9999)
						}
					}
				});
			},
			//左侧tab切换
			changeTab(index,item){
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak(item.roomName,1);
				}
				this.tabIndex = index;
				this.getObjectRightListByServiceItem(item.id)
			},
			gotodeatils(item){
				if(item.outStatus==0){
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak(item.oldManName+'已外出',1);
					}					
				}else{
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak(item.oldManName,1);
					}	
					uni.navigateTo({
						url:'./detail?oldBaseId='+item.oldBaseId
					})
				}
			},
			gotodeatilsOther(item){
				// 床号501-5，目前暂无长者入住。
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak('暂无长者入住',1);
				}
			}
		}
	}
</script>

<style scoped lang="scss"> 

	
	page{
		background-color: #FFFFFF;
	}
	.scroll_inner{
		width:200rpx;
		height:100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.scroll{
		background-color: #F2F2F2;
		height: 100%;
	}
	.changeColor{
		background-color:#FFFFFF;
	}
	.scroll_rig{
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 0 20rpx;
		height: 100%;
		width: 100%;
		.person_img{
			image{
				width:120rpx;
				height: 120rpx;
			}
		}
		.person_rig{
			margin-left:20rpx;
			display: flex;
			flex:1;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #DDDDDD;
		}
		.person_bt{
			display: flex;
			align-items: center;
		}
		.person_tp{
			height: 100%;
			padding-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
		}	
	}
	.person_icon{
		text{
			font-size:40rpx;
		}
	}
	.cu-tag{
		height: 36rpx;
		margin: 0 15rpx;
	}
	.scroll_rig_inner{
		padding: 10rpx 0;
		display: flex;
	}
</style>
